<template>
  <div id="app">
    <van-nav-bar
        title="管理员端"
        left-text=""
        right-text=""
        left-arrow
        fixed
    >
      <template #left>
        <span class="title">GiliGii在线教育平台</span>
      </template>

      <template #right>
        <!-- <div>
          <van-button type="info" size="small" class="nav-button" @click="goTo('CourseMView')">课程管理</van-button>
          <van-button type="info" size="small" class="nav-button" @click="goTo('UserMView')">用户管理</van-button>
        </div> -->
        <van-button type="danger" size="small" class="nav-button" @click="logout">退出登录</van-button>
      </template>
    </van-nav-bar>

<!--    用户问题-->
    <div class="sound">
      <svg  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           width="28" height="28">
        <path
            d="M257.493333 322.4l215.573334-133.056c24.981333-15.413333 57.877333-7.914667 73.493333 16.746667 5.301333 8.373333 8.106667 18.048 8.106667 27.914666v555.989334C554.666667 819.093333 530.784 842.666667 501.333333 842.666667c-9.994667 0-19.786667-2.773333-28.266666-8L257.493333 701.6H160c-41.237333 0-74.666667-33.013333-74.666667-73.738667V396.138667c0-40.725333 33.429333-73.738667 74.666667-73.738667h97.493333z m26.133334 58.4a32.298667 32.298667 0 0 1-16.96 4.8H160c-5.888 0-10.666667 4.714667-10.666667 10.538667v231.733333c0 5.813333 4.778667 10.538667 10.666667 10.538667h106.666667c5.994667 0 11.872 1.664 16.96 4.8L490.666667 770.986667V253.013333L283.626667 380.8zM800.906667 829.653333a32.288 32.288 0 0 1-45.248-0.757333 31.317333 31.317333 0 0 1 0.768-44.693333c157.653333-150.464 157.653333-393.962667 0-544.426667a31.317333 31.317333 0 0 1-0.768-44.682667 32.288 32.288 0 0 1 45.248-0.757333c183.68 175.306667 183.68 460.010667 0 635.317333z m-106.901334-126.186666a32.288 32.288 0 0 1-45.248-1.216 31.328 31.328 0 0 1 1.237334-44.672c86.229333-80.608 86.229333-210.56 0-291.178667a31.328 31.328 0 0 1-1.237334-44.672 32.288 32.288 0 0 1 45.248-1.216c112.885333 105.546667 112.885333 277.418667 0 382.965333z"
            fill="#47a189">
        </path>
      </svg>
      <li><p class="text">{{ listquestion }}</p></li>
    </div>

    <!-- 图片 -->
    <div class="logo-container">
      <img src="@/assets/logo2.png" alt="Logo" class="logo">
    </div>
    <button class="chanshow" @click="changeview()"><h5 v-if="isshow">切换至管理用户</h5><h5 v-if="!isshow">切换至管理视频</h5></button>
      <input v-model="searchuser" placeholder="搜索用户" aria-label="Search" class="searchcourse" v-if="!isshow"/>
      <el-button @click="search" type="submit" icon="el-icon-search" class="searchcourse" v-if="!isshow"></el-button>
    <!-- 表单容器 -->
    <div class="form-container">

      <!-- 待审核课程表单 -->
      <div class="form-box" v-if="isshow">
        <h4>待审核课程</h4>
        <el-form label-width="100px" class="course-form">
          <el-table :data="courseList" tyle="width: 100%">
            <el-table-column prop="categoryName" label="课程分类"></el-table-column>
            <el-table-column prop="courseName" label="课程名称"></el-table-column>
            <el-table-column prop="lecturerName" label="讲师名称"></el-table-column>
            <el-table-column prop="introduce" label="课程简介"></el-table-column>
            <el-table-column prop="coursePrice" label="费用"></el-table-column>
            <el-table-column label="课程Logo">
              <template slot-scope="scope">
                <img :src="scope.row.courseLogo || 'default-cover.jpg'"
                     style="width: 100%; height: 150px; object-fit: cover; border-radius: 10px;">
              </template>
            </el-table-column>
            <el-table-column label="课程视频">
              <template slot-scope="scope">
                <video :src="scope.row.url" controls class="vedio" style="width: 260px; height: 150px;"></video>
              </template>
            </el-table-column>
            <el-table-column label="审核操作">
              <template slot-scope="scope">
                <el-form>
                  <el-button type="success" @click="uploadCourse(scope.row.id)">审核通过</el-button>
                  <el-button type="danger" @click="deleteCourse(scope.row.id)">审核失败</el-button>
                </el-form>
              </template>
            </el-table-column>
          </el-table>

        </el-form>
      </div>


      <!-- 用户表单 -->
      <div class="form-box" v-if="!isshow">
        <h4>管理用户列表</h4>
        <el-form label-width="100px" class="user-form">
          <el-table :data=" unmuteUser" style="width: 100%">
            <el-table-column prop="username" label="用户账号"></el-table-column>
            <el-table-column prop="nickname" label="用户昵称"></el-table-column>
            <el-table-column label="用户状态">
            <template slot-scope="scope">
              <h5 v-if="scope.row.status_id===1">正常</h5>
              <h5 v-else>封禁</h5>
            </template></el-table-column>
            <el-table-column label="头像">
              <template slot-scope="scope">
                <img :src="scope.row.user_head || 'default-cover.jpg'"
                     style="width: 50%; height: 100px; object-fit: cover; border-radius: 50%;">
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <el-form slot-scope="scope">
                <el-button type="primary" @click="initilization(scope.row.username)" style="width: 100px;">初始化密码</el-button>
                <el-button type="primary" @click="block(scope.row.username,scope.row.status_id)" style="width: 100px;">{{scope.row.status_id==1?'封号':'解封'}}</el-button>
              </el-form>
            </el-table-column>
          </el-table>

        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import {NavBar, Button, Slider} from 'vant';

export default {
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Slider.name]: Slider,
  },


  data() {
    return {
      isshow:true,
      data:'',
      searchuser:'',
      ids: [],
      videos: [],
      names: [],
      courseList: [],
      unmuteUser: [], // 假设这是从后端获取的用户列表
      listquestion:[],
    };
  },


  methods: {
    goTo(name) {
      this.$router.push({name: name});
    },

    logout() {
      // 退出登录逻辑，这里只是导航到首页
      this.$router.push('/');
    },

    //查询用户
    changeview(){
      axios.post('http://localhost:8081/springboot01/user/listAllUser',
          {},{
            headers: {
              'Content-Type': 'application/json'
            }
          }
      )
      .then(responseUser =>{
        this.unmuteUser=responseUser.data;
      })
      ;
      //显示用户或者课程界面
      this.isshow=!this.isshow;
    },
    //搜索用户
    search(){
      axios.post("http://localhost:8081/springboot01/user/listSearchUser",
          {
            search:this.searchuser
          },{
        headers:{
          'Content-Type': 'application/json'
        }
          }
      ) .then(responseUser =>{
        this.unmuteUser=responseUser.data;
      })
    },
    // 上传课程
    uploadCourse(id) {
      axios.post('http://localhost:8081/springboot01/course/updatestatusId',
          {
            id: id
          }, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
          .then(responseCourse => {
            console.log('Course upload response:', responseCourse.data);
            if (responseCourse.data.msg === "请求成功!") {
              this.getcheck();
            } else {
              // 处理课程信息上传失败的情况
              alert('课程信息上传失败');
            }
          })
          .catch(error => {
            console.error('Error during upload:', error);
            // 在这里处理错误情况，例如给用户适当的提示
            alert('上传过程中出现错误，请重试');
          });


    },

    deleteCourse(id) {
      axios.post('http://localhost:8081/springboot01/course/notpass',
          {
            id: id
          }, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
          .then(responseCourse => {
            console.log('Course upload response:', responseCourse.data);
            if (responseCourse.data.msg === "请求成功!") {
              this.search();
              alert(responseCourse.data.msg);
            } else {
              // 处理课程信息上传失败的情况
              alert('课程信息上传失败');
            }
          })
          .catch(error => {
            console.error('Error during upload:', error);
            // 在这里处理错误情况，例如给用户适当的提示
            alert('上传过程中出现错误，请重试');
          });

    },
    //初始化密码
    initilization(username){
      axios.post('http://localhost:8081/springboot01/user/resetPassword',
      {
        username:username
      },{
        headers:{
          'Content-Type': 'application/json'
        }
          })
          .then(responseCourse => {
            console.log('初始化:', responseCourse.data);
            if (responseCourse.data.msg === "请求成功!") {
              alert(responseCourse.data.msg);
            } else {
              // 处理失败的情况
              alert('初始化密码失败');
            }
          })
          .catch(error => {
            console.error('Error during upload:', error);
            // 在这里处理错误情况，例如给用户适当的提示
            alert('错误，请重试');
          });
    },
    //解封/封号
    block(username,status_id){
      axios.post('http://localhost:8081/springboot01/user/modifyUser',
          {
            username: username,
            status_id:status_id
          },{
        headers:{
          'Content-Type': 'application/json'
        }
      })
          .then(responseCourse => {
            console.log('用户状态设置:', responseCourse.data);
            if (responseCourse.data.msg === "请求成功!") {
              this.search();
            } else {
              // 处理课程信息上传失败的情况
              alert('设置失败');
            }
          })
          .catch(error => {
            console.error('Error during upload:', error);
            // 在这里处理错误情况，例如给用户适当的提示
            alert('过程中出现错误，请重试');
          });
    },
    //更新视频
    getcheck(){
      axios.get('http://localhost:8081/springboot01/course/check')
      .then(reponse=>{
        this.courseList = reponse.data;
      })
    },
    getques(){
      axios.post('http://localhost:8081/springboot01/user/readquestion')
      .then((rep=>{
        this.listquestion=rep.data.data;
      }))
    }

  },
  async created() {
    try {
      // const ans =await axios.post('http://localhost:8081/springboot01/user/listAllUser');
      const response = await axios.get('http://localhost:8081/springboot01/course/check');
      this.courseList = response.data;
      this.getques();
      // this.unmuteUser=ans.data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  },

//     unmuteUser(id) {
//       // 解除用户禁言
//       axios.post('http://localhost:8081/springboot01/user/unmute', { id })
//           .then(response => {
//             if (response.data.success) { // 假设后端返回的数据中有success字段
//               // 更新被禁言用户列表，移除对应的用户
//               const index = this.mutedUsers.findIndex(user => user.id === id);
//               if (index !== -1) {
//                 this.mutedUsers.splice(index, 1);
//               }
//               alert('用户已解除禁言');
//             } else {
//               alert('操作失败: ' + response.data.message);
//             }
//           })
//           .catch(error => {
//             console.error('Unmute user error:', error);
//             alert('操作过程中出现错误，请重试');
//           });
//     },
//     // 以下方法可以用于在组件创建时获取数据
//     async fetchData() {
//       try {
//         const [courseResponse, userResponse] = await Promise.all([
//           axios.get('http://localhost:8081/springboot01/course/check'),
//           axios.get('http://localhost:8081/springboot01/user/muted'),
//         ]);
//         this.courses = courseResponse.data; // 假设直接返回课程列表
//         this.mutedUsers = userResponse.data; // 假设直接返回用户列表
//       } catch (error) {
//         console.error('Fetch data error:', error);
//       }
//     },
//   // 组件创建完毕后获取数据
//   created() {
//     this.fetchData();
//   },
};
</script>

<style scoped>

video {
  height: 300px;
  width: 300px;
}

.title {
  /* 标题样式 */
  font-size: 20px;
  font-weight: bold;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.nav-button {
  /* 按钮样式 */
  font-size: 15px;
  margin-left: 15px;
}


.form-container {
  /* 表单容器样式 */
  margin-top: 50px; /* 上边距，确保内容不被导航栏遮挡 */
  padding: 10px;
  color: rgb(0, 0, 0);
}

.logo-container {
  margin-top: 50px;
  text-align: center;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

.logo {
  width: 300px;
  height: auto;
}

ul li {
  margin-bottom: 10px;
}

/* 表单容器样式 */
.form-container {
  margin-top: 20px;
  color: rgb(250, 151, 191);
  padding: 0 10px;
}

/* 表单框样式 */
.form-box {
  flex: 1;
  margin-right: 20px;
  border: 2px solid #ccc; /* 添加边框 */
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  align-content: center;
}

.form-box h4 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  text-align: center;
}

.course-form {
  max-width: 2500px; /* 容器最大宽度，可以根据需要调整 */
  overflow-y: auto; /* 允许垂直方向上的滚动 */
  max-height: 3000px; /* 限制最大高度，根据实际需要调整 */
  text-align: center; /* 水平居中表单内部的所有内容 */
}

.form-box h4 {
  margin: 0; /* 移除默认的margin */
  padding: 10px 0; /* 添加上下内边距 */
  background-color: #f8f8f8; /* 可选：为标题添加背景颜色 */
  border-bottom: 1px solid #ccc; /* 可选：为标题添加底边框 */
}

.form-box:last-child {
  margin-right: 0;
}

ul {
  list-style: none;
  padding: 0;
  text-align: left; /* 将列表内容左对齐，因为.form-box被设置为居中 */
}

/* li {

} */
.user-form {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;

}


.button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}


.van-button {
  margin-left: 5px;
}

@media (max-width: 768px) {
  .course-form,
  .user-form {
    flex-direction: column;
  }

  .button-container {
    justify-content: center;
  }
}

.course-form.column,
.user-form.column {
  flex-direction: column; /* This will make the child elements stack vertically */
}


.vedio {
  height: auto;
  width: 200px;
  margin: 0;
}


.course-form .el-button {
  margin: 5px; /* 按钮之间的间距 */
}


.courseList {
  margin: 0 auto; /* 水平居中 */
  text-align: center;
  background-color: #1989fa;
  border-radius: 100px;
}

/* 图片容器样式 */
.logo-container {
  margin-top: 50px;
  text-align: center; /* 居中显示图片 */
  margin-bottom: 5px; /* 与下方内容间隔 */
}

/* 图片样式 */
.logo {
  width: 300px; /* 或其他尺寸，根据实际需要调整 */
  height: auto; /* 保持图片比例 */
  align-content: center;
}
.chanshow{
  position: relative;
  width: 100px;
  height: 30px;
  left: 10px;
}
.searchcourse {
position: relative;
left: 100px;
}

/*用户问题*/
.sound{
  padding: 0;
  text-decoration: none;
  list-style: none;
  background-repeat: no-repeat;
  width: 480px;
  background-color: #c5eee3;
  color: #47a189;
  border-radius: 20px;
  margin: 50px auto;
  display: flex;
  gap: 10px;
  overflow: hidden;
  line-height: 37px;
  align-items: center;
}
.sound .icon{
  width: 28px;
  height: 28px;
  padding-left: 10px;
}
.sound li{
  width: 85%;
  overflow: hidden;
}
.sound li p{
  width: 100%;
  transform: translateX(420px);
  white-space: nowrap;
}
.text {
  animation: slideLeft 100s linear infinite;
}

@keyframes slideLeft {
  0% {
    transform: translateX(408px);
  }
  100% {
    transform: translateX(-10000px);
  }
}


</style>